<template>
      <div id="header">
            <div class="container">
                  <!-- logo icon -->
                  <div class="head">
                        <div class="left">
                              <div class="logo">
                                    <img src="../assets/img/logo.png" alt="" @click="getUserInfo">
                              </div>
                        </div>
                        <div class="right" @click="navbarChange">
                              <div class="icon">
                                    <img src="../assets/img/icon.png" v-if="!showNavbar" alt="">
                                    <img src="../assets/img/cancel.png" v-else alt="">
                              </div>
                        </div>
                  </div>
                  <!-- navbaar -->
                  <div class="navbar" v-if="showNavbar">
                        <div class="nav" :class="{'active': activeKey == index}" @click="change(item, index)" v-for="(item, index) in navbar" :key="index">
                             <div class="txt">
                                   {{ item.name }}
                             </div>
                             <div class="icon">
                                   <van-icon name="arrow" />
                             </div>
                        </div>
                        
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        activeKey: 0,
                        showNavbar: false,
                        navbar: [
                              {
                                    name: "首页",
                                    route: "/"
                              },
                              {
                                    name: "代理加盟",
                                    route: "/daili"
                              },
                              {
                                    name: "关于我们",
                                    route: "/aboutus"
                              },
                        ]
                  }
            },
            methods: {
                  // 点击navbar
                  change(item, index) {
                        this.activeKey = index
                        this.showNavbar = false
                        this.$router.push(item.route)
                  },
                  // 图标转换
                  navbarChange() {
                        this.showNavbar = !this.showNavbar
                  },
                  getUserInfo() {
                        // console.log("11");
                        
                        var appid= "wxe51c1ca5cd4830df" // appid
                        var url = 'http://api.vueweb.top/mobile' // 回调链接地址，需转码为URI格式，必须去除#后的参数
                        var scope = 'snsapi_base' // snsapi_base静默授权，snsapi_userinfo弹出授权页面
                        var state= '' // 重定向带的参数
                        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
                  },
            }
      }
</script>

<style lang="scss" scoped>
#header {
      width: 100%;
      
      max-width: 750px;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;
      background-color: #fff;
      .container {
            width: 100%;
            .head {
                  width: 100%;
                  height: 0.8rem;
                  line-height: 0.8rem;
                  padding: 0.2rem 0.2rem;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .left {
                        width: 1.66rem;
                        height: 0.41rem;
                        overflow: hidden;
                        .logo {
                              width: 1.66rem;
                              height: 0.41rem;
                              overflow: hidden;
                              img {
                                  width: 1.66rem;
                                  height: 0.41rem; 
                                  display: block; 
                              }
                        }
                  }
                  .right {
                        
                        .icon {
                              width: 0.45rem;
                              height: 0.45rem;
                              overflow: hidden;
                              img {
                                  width: 0.45rem;
                                    height: 0.45rem;
                                  display: block; 
                              }
                        }
                  }
            }
            .navbar {
                  width: 100%;
                  background-color: #fff;
                  .nav {
                        width: 100%;
                        line-height: 0.8rem;
                        padding: 0 0.3rem;
                        font-size: 0.3rem;
                        margin: 0.2rem 0;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .icon {
                              display: flex;
                              height: 100%;
                              flex-direction: column;
                              justify-content: center;
                        }
                  }
            }
      }
}

.active {
      color: #1c9ff2;
      border-bottom: 1px solid #1c9ff2;
}
</style>